import React, { useRef } from 'react';
import { getOrders } from '@/services/goods';
import { Tag } from 'antd';
import ProTable from '@ant-design/pro-table';

const Goods: React.FC = () => {
  // 表格 ref，便于自定义操作表格
  const actionRef = useRef();
  const orderStatusMap = {
    1: {
      text: '下单',
      status: 'default',
    },
    2: {
      text: '支付',
      status: 'success',
    },
    3: {
      text: '发货',
      status: 'processing',
    },
    4: {
      text: '收货',
      status: 'warning',
    },
    5: {
      text: '过期',
      status: 'error',
    },
  };

  const columns = [
    {
      title: '单号',
      dataIndex: 'order_no',
    },
    {
      title: '用户',
      hideInSearch: true,
      dataIndex: 'user_id',
    },
    {
      title: '金额',
      hideInSearch: true,
      dataIndex: 'amount',
    },
    {
      title: '状态',
      hideInSearch: true,
      dataIndex: 'status',
      render: (_) => {
        return <Tag color={orderStatusMap[_].status}>{orderStatusMap[_].text}</Tag>;
      },
    },
    {
      title: '支付时间',
      hideInSearch: true,
      dataIndex: 'pay_time',
    },
    {
      title: '支付类型',
      hideInSearch: true,
      dataIndex: 'pay_type',
    },
    {
      title: '支付单号',
      dataIndex: 'trade_no',
    },
  ];

  const getData = async (params) => {
    const rep = await getOrders(params);

    return {
      data: rep.data,
      success: true,
      total: rep.meta.pagination.total,
    };
  };

  return (
    <>
      <ProTable
        columns={columns}
        actionRef={actionRef}
        rowKey="id"
        request={async (params) => getData(params)}
        search={{
          labelWidth: 'auto',
        }}
        pagination={{
          pageSize: 10,
        }}
        dateFormatter="string"
        headerTitle="用户列表"
      />
    </>
  );
};

export default Goods;
